<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import { formatAddress, fromWei } from '@/utils/format';

export default defineComponent({
    props: {
        rrInfos: {
            type: Array,
            default: []
        }
    },
    setup() {
        const open = ref(false);
        const setat = reactive({
            pageNum: 0,
            pageSize: 20,
        });
        const refreshing = ref(false);
        const loading = ref(false);
        const finished = ref(false);
        const list = ref([]);
        const onRefresh = () => {
            open.value = true;
            list.value = [];
            setat.pageNum = 0;
            finished.value = false;
            loading.value = true;
            onLoad();
        };
        const onLoad = async () => {
            //   const res = await getDonateList(setat);
            //   if (refreshing.value) {
            //     list.value = [];
            refreshing.value = false;
            //   }
            //   list.value = list.value.concat(res.data.data.DonateList || []);
            loading.value = false;
            //   setat.pageNum++;
            //   if (list.value.length >= res.data.data.Total) {
            //     finished.value = true;
            //   }
        };
        return {
            open,
            list,
            setat,
            refreshing,
            loading,
            finished,
            onRefresh,
            onLoad,
            formatAddress,
            fromWei
        };
    },
});
</script>
<template>
    <!-- 右侧弹出 -->
    <van-popup v-model:show="open" position="right" closeable close-icon-position="top-left" close-icon="arrow-left"
        teleport="body" :style="{
            width: '100%', height: '100%', background: `#fff`
        }">
        <div class="title" @click="open = false">{{ $t('layout.InviteRankingPool') }}</div>
        <div class="list">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list v-model:loading="loading" :finished="finished" :finished-text="$t('layout.noMore')"
                    @load="onLoad">
                    <div class="row">
                        <div class="cell">{{ $t('layout.Ranking') }}</div>
                        <div class="cell">{{ $t('layout.address') }}</div>
                        <div class="cell">{{ $t('layout.DirectPerformancePromotion') }}</div>
                        <div class="cell">{{ $t('layout.RankingRatio') }}</div>
                    </div>
                    <template v-for="(item, index) in rrInfos">
                        <div class="row" :key="index"
                            v-if="item.top != '0x0000000000000000000000000000000000000000' && fromWei(item.amount) != 0">
                            <div class="cell">{{ index + 1 }}</div>
                            <div class="cell">{{ formatAddress(item.top) }}</div>
                            <div class="cell">{{ fromWei(item.amount) }}</div>
                            <div class="cell">{{ fromWei(item.reward) }}</div>
                        </div>
                    </template>
                </van-list>
            </van-pull-refresh>
        </div>
    </van-popup>
</template>
<style lang="less" scoped>
.van-popup {


    .title {
        padding-left: 45px;
        font-size: 16px;
        line-height: 54px;
    }

    .list {
        padding: 5px 15px 15px 15px;

        .row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 15px 0;
            border-radius: 20px;
            text-align: center;
            background: #f5f5f5;

            &:first-child {
                background: rgba(255, 160, 0, 0.1);
            }

            .cell {
                flex: 1;
                font-size: 12px;
            }

        }
    }
}
</style>